<template>
  <div class="projectShow">
    <ProNavbar
      @sortClick="sortClick"
      :treeData="treeData"></ProNavbar>

    <ProList
      :sortTitle ="sortTitle"
      :dataList="dataList"></ProList>
  </div>
</template>

<script>
import ProNavbar from './ProjectNavbar'
import ProList from './ProjectList'
import { queryProjectType, getAllProjects, getOneProject, getProjectByType } from '@/request/api'
export default {
  name: 'projectShow',
  components: {
    ProNavbar,
    ProList
  },
  data () {
    return {
      img_front: 'http://backmanage.yuxjt.com/',
      dataList: [],
      treeData: [],
      sortTitle: '全部'
    }
  },
  created () {
    // 获取所有项目
    this.getAllProj()
    queryProjectType().then(res => {
      this.treeData = res
    })
  },
  mounted () {},
  methods: {
    sortClick (sortId) {
      this.sortTitle = sortId.type_name
      if (sortId.id === 999) {
        this.getAllProj()
      } else {
        // 点击分类，切换图片
        getProjectByType({typeId: sortId.id}).then(res => {
          this.dataList = res.map(item => {
            const imgPath = this.img_front + item.imgPath
            item.imgPath = imgPath
            return item
          })
        })
      }
    },
    getAllProj () {
      getAllProjects().then(res => {
        this.dataList = res.map(item => {
          const imgPath = this.img_front + item.imgPath
          item.imgPath = imgPath
          return item
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .projectShow {

  }
</style>
